<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<mycom1></mycom1>
			<hr />
			<mycom1></mycom1>
			<hr />
			<mycom1></mycom1>
		</div>
		<template id="tmp1">
			<div>
				<input type="button" value="+1" @click="increment" />
				<h3>{{count}}</h3>
			</div>
		</template>
		<script>
			//这是一个计时器的组件，身上有一个按钮，让data的count值+1
			var dataObj = { count: 0 }
			Vue.component('mycom1', {
				template: '#tmp1',
				data: function() {
					//第一个return会将上面的三个组件共用一个data数据并保持一致进行
					// return dataObj
					//第二个return保持的data内部方法的独立性
					return { count: 0 }
				},
				methods: {
					increment() {
						this.count++
					}
				}
			})
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {}
			})
		</script>
	</body>
</html>
